<template>
  <div class="paper-wrapper container" ref="wrapper">
    <div class="paper-left">
      <div class="big-title">{{ examTitle }}</div>
      <div class="paper-question" v-for="(part, j) in testParts" :key="part.id">
        <Question
          v-for="(item, index) in part.value"
          :key="item.id"
          :question="item"
          :qIndex="addNum(j) + (index + 1)"
          :refKey="'topic' + (addNum(j) + (index + 1))"
          :relIndex="sheetIndex"
          :sheetChecked="sheetChecked"
          :qType="item.question_type"
          :qScore="item.score"
          :answerStatus="answerStatus"
          :visibleAnswer="visibleAnswer"
          :options="setOptionsAnswer(item)"
          :answer="setCorrectAnswer(item)"
          :level="1"
        ></Question>
      </div>
      <EduNoData v-if="$util.isEmpty(testParts)"></EduNoData>
    </div>
    <div class="paper-right">
      <Sheet :testParts="testParts" @change="handleRecordChange" @click="handleSheetChange"></Sheet>
    </div>
  </div>
</template>

<script>
import Question from './components/question'
import Sheet from './components/sheet'
import EduNoData from '@/components/EduNoData'
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0)
export default {
  components: {
    Question,
    Sheet,
    EduNoData
  },
  data() {
    return {
      examTitle: '',
      testParts: [],
      sheetIndex: 0,
      sheetChecked: false,
      answerStatus: 0,
      visibleAnswer: 0
    }
  },
  created() {
    if (this.$route.query.status == 1) {
      this.getExamRecord()
    } else {
      this.getExamRecordWrong()
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('beforeunload', this.handleBeforeunload)
    })
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.handleBeforeunload, false)
  },
  methods: {
    // 获取全部解析数据
    getExamRecord(val) {
      const _this = this
      this.$api.getUserExamRecord(
        {
          record_id: this.$route.query.id
        },
        res => {
          const { data } = res
          _this.examTitle = data.paper_title
          _this.testParts = data.paper_parts
          _this.answerStatus = data.answer_status
          _this.visibleAnswer = data.visible_answer
          this.sheetChecked = val
        }
      )
    },
    // 获取错题解析数据
    getExamRecordWrong(val) {
      const _this = this
      this.$api.getUserExamRecordWrong(
        {
          record_id: this.$route.query.id
        },
        res => {
          const { data } = res
          _this.examTitle = data.paper_title
          _this.testParts = data.paper_parts
          _this.answerStatus = data.answer_status
           _this.visibleAnswer = data.visible_answer
          this.sheetChecked = val
        }
      )
    },
    async handleRecordChange(val) {
      document.documentElement.scrollTop = 0
      if (val) await this.getExamRecordWrong(val)
      else await this.getExamRecord(val)
    },
    handleSheetChange(index) {
      this.sheetIndex = index
    },
    // 计算答题卡试题编号
    addNum(i) {
      let numArr = this.testParts.map(item => item.value.length)
      let newArr = numArr.slice(0, i)
      return sum(newArr)
    },
    // 设置选项的答案
    setOptionsAnswer(item) {
      const _this = this
      let answer
      if (_this.$util.inArray(item.question_type, [1, 2])) {
        if (_this.$util.isEmpty(item.answer_data)) answer = ''
        else answer = parseInt(item.answer_data.toString())
      } else if (_this.$util.inArray(item.question_type, [3, 4])) {
        if (_this.$util.isEmpty(item.answer_data)) return []
        answer = item.answer_data.map(Number)
      } else if (item.question_type == 5) {
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = []
          item.options.forEach(topic => {
            answer.push('')
          })
        } else {
          answer = item.answer_data
        }
      } else if (item.question_type == 7) {
        answer = []
        item.topics.forEach(topic => {
          if (_this.$util.isEmpty(topic.answer_data)) {
            answer.push('')
          } else {
            answer.push(parseInt(topic.answer_data.toString()))
          }
        })
      } else if (item.question_type == 8) {
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = ''
        } else {
          answer = item.answer_data.toString()
        }
      }
      return answer
    },
    // 获取正确的答案
    setCorrectAnswer(item) {
      let answer
      if (this.$util.inArray(item.question_type, [1, 2, 3, 4])) {
        let topic = item.options.filter(item => item.is_right == 1)
        answer = topic.map(item => item.key)
      } else if (item.question_type == 5) {
        answer = item.options.map(item => item.values)
      } else if (item.question_type == 7) {
        // 完型填空合拼正确的试题数组
        let topic = item.topics.reduce(
          (pre, cur) => pre.concat(cur.options.filter(item => item.is_right == 1)),
          []
        )
        answer = topic.map(item => item.key)
      } else if (item.question_type == 8) {
        answer = [item.reference_answer]
      }
      return answer
    },
    handleBeforeunload() {
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-wrapper {
  min-height: 800px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10px;
  .paper-left {
    width: 890px;
    background-color: #ffffff;
  }
  .big-title {
    padding: 18px 0;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    text-align: center;
    border-bottom: 1px solid $border-color-divider;
  }
  .paper-question {
    padding: 5px 20px 20px;
  }
  .paper-right {
    width: 300px;
    background-color: #ffffff;
  }
}
</style>
